<script setup lang="ts">
defineOptions({
  name: 'ItemFourItem',
})

const props = defineProps<{
  img: string
  title: string
  value: any
}>()
</script>

<template>
  <div class="flex items-center">
    <div class="item-icon ml-4 mr-1 h-24 w-24 flex-shrink-0">
      <img :src="img" class="h-10 w-8">
    </div>
    <div class="ml-3 mt-3 flex flex-auto flex-col">
      <div class="text-[#C0E7FF] opacity-80">
        {{ title }}
      </div>
      <div class="text-lg text-[#18DEF5] font-pmzd">
        {{ value }}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.item-icon {
  background: url('./item-four-icon-bg.png') no-repeat;
  background-size: cover;
  img {
    margin: 32px 10px 20px 38px;
  }
}
.item-text {
  background: linear-gradient(90deg, rgba(46,137,250,0) 0%, rgba(46,137,250,0.3) 48%, rgba(46,137,250,0) 100%);
}
</style>
